<template>
  <view>
    <scroll-view scroll-y="true" :class="[isFlag ? 'tree-wrapp' : '']">
      <treeNode
        :keyword="keyword"
        :disabledIdArr="disabledIdArr"
        v-for="item in tree"
		:selectIds="selectIds"
        :item="{ ...item, isOpen: true }"
        :key="item.id"
        :defaultProps="defaultProps"
        :parentSelect="parentSelect"
      ></treeNode>
    </scroll-view>
  </view>
</template>
<script>
import treeNode from './tree-node.vue';
export default {
	components: {
		treeNode,
	},
	props: {
		keyword: [String, Number],
		disabledIdArr: {
			type: Array,
			default: () => {
				return [];
			},
		},
		// selectIds: {
		//   type: String,
		//   default: "",
		// },
		tree: {
			type: Array,
			default: () => {
				return [];
			},
		},
		defaultProps: {
			type: Object,
			default: () => {
				return {
					id: 'id',
					children: 'children',
					label: 'name',
				};
			},
		},
		showState: {
			type: Boolean,
			default: true,
		},
		isFlag: {
			type: Boolean,
			default: false,
		},

		// 父级节点是否能选
		parentSelect: {
			type: Boolean,
			default: true,
		},
		// 是否开启多选
		multiSelect: {
			type: Boolean,
			default: false,
			// 默认单选 false
		},
	},
	provide() {
		return {
			defaultProps: this.defaultProps,
			onClickItem: this.onClickItem,
			setSelectNode: this.setSelectNode,
			// selectIds:this.selectIds
		};
	},
	data() {
		return {
			selectIds:[],
			nodeMap: {},
			// 单选时当前选中节点实例
			currentSelectedNode: null,
			// 多选时所有选中节点实例
			selectedNodes: [],
		};
	},
	created() {
		this.setNodeMap(this.tree);
	},
	watch: {
		selectIds(val) {
			console.log(val,'selectIds');
		},
		tree(val) {
			// console.log('change', val);
			this.setNodeMap(val);
		},
	},
	methods: {
		init(arr) {
			this.selectIds = arr.map(item=>{
				return String(item);
			});
			// console.log(this.nodeMap,arr);
		},
		setNodeMap(tree) {
			let map = {};
			const findChild = (list) => {
				for (let i = 0; i < list.length; i++) {
					map[list[i].id] = {
						name: list[i].name,
						id: list[i].id,
						parentId: list[i].parentId,
					};
					if (list[i][this.defaultProps.children]) {
						findChild(list[i][this.defaultProps.children]);
					}
				}
			};
			findChild(tree);
			this.nodeMap = map;
			// console.log('nodeMap', map);
		},
		setSelectNode(nodeInstance) {
			console.log(nodeInstance,'nodeInstance');
			if (this.multiSelect) {
				// console.log('有没有进来这里');
				// 多选：切换当前节点选中状态
				if (nodeInstance.selected) {
					// console.log('取消');
					// 已选中，取消
					nodeInstance.selected = false;

					this.selectedNodes = this.selectedNodes.filter(
						(n) => n.item.id != nodeInstance.item.id
					);
					// console.log(this.selectedNodes,'看看这里');
				} else {
					nodeInstance.selected = true;
					this.selectedNodes.push(nodeInstance);
				}
			} else {
				// 单选
				if (
					this.currentSelectedNode &&
          this.currentSelectedNode !== nodeInstance
				) {
					this.currentSelectedNode.selected = false;
				}
				nodeInstance.selected = true;
				this.currentSelectedNode = nodeInstance;
			}
			// console.log(this.selectedNodes, '11111111');
		},
		clear() {
			for (let i = 0; i < this.selectedNodes.length; i++) {
				this.selectedNodes[i].selected = false;
			}
			this.selectedNodes = [];
			this.selectIds = [];
		},
		onClickItem(e) {
			if (this.multiSelect) {
				// 多选，返回所有已选节点的 id/name
				let node = this.selectedNodes.filter(item=>item.selected);
				let ids = node.map((n) => n.item.id);
				ids = [...new Set(ids)];
				let names = node.map((n) => n.item.name);
				names = [...new Set(names)];
				this.$emit('onChecked', {
					ids,
					names,
					nodes: node.map((n) => n.item),
				});
				// console.log(e,'选择',node);
			} else {
				let ids = [];
				let names = [];
				const getParents = (item) => {
					if (!item || !item.id) {
						return;
					}
					ids.unshift(item.id);
					names.unshift(item.name);
					if (item.parentId && item.parentId > 0) {
						getParents(this.nodeMap[item.parentId]);
					}
					return;
				};
				getParents(e);
				this.$emit('onChecked', { ...e, ids, names });
			}
		},
	},
};
</script>
<style scoped lang="scss">
.tree-wrapp {
  //   height: 60vh;
  height: 700rpx;
}
</style>
